<template>
    <div id="cmap">
        <div id="conditionmap" class="conditionmap" ></div>
        <div id="hideTab" class="hide_condition_Tab_o" v-show="showTabFlagO"  @click="hideConditionMapO()"></div>
        <div id="showTab" class="show_condition_Tab_o" v-show="showTabFlagT" @click="showConditionMapO()"></div>
        <div v-show="showTabFlagO" class="con_left_body">
            <p>公路网态势
                开始： <input placeholder="请输入日期" id="conditionStartTime"  class="laydate-icon" onclick="laydate({istime: true,isclear:false,issure:false,istoday:false, format: 'YYYY-MM-DD hh',min:laydate.firstDay(),max:laydate.now(0, 'YYYY-MM-DD'),start: laydate.now(0, 'YYYY-MM-DD')})">
                结束： <input placeholder="请输入日期" id="conditionEndTime"  class="laydate-icon" onclick="laydate({istime: true,isclear:false,issure:false,istoday:false, format: 'YYYY-MM-DD hh',min:laydate.firstDay(),max:laydate.now(0, 'YYYY-MM-DD'),start: laydate.now(0, 'YYYY-MM-DD')})">
                <a href="#" @click="changeChooseTab()" ><span class="search_icon"></span></a>

            </p>
            <div class="con_lef_body_tab">
                <ul class="nav nav-tabs tab_li nav-color" id="otherInfoTab">
                    <li class="active"><a href="#" @click="changeChooseTab('G')">国道</a></li>
                    <li><a href="#" @click="changeChooseTab('S')">省道</a></li>
                    <li><a href="#" @click="changeChooseTab('X')">县道</a></li>
                    <li><a href="#" @click="changeChooseTab('A')">全部</a></li>
                </ul>
                <div id="tab_mes"  class="tab_mes">
                    <!--<div><span>更新时间：1小时前<span>  <span style="padding-left:20px">公路中断率：低<span class="tab_icon_down"></span></span>  <span style="padding-left:30px">公路拥堵度：高<span class="tab_icon_up"></span></span></div>-->
                </div>

                <div class="tab_content">
                    <ol class="tab_list">
                        <li v-for="item in listTab" @click="initPointForMap(item)">
                            {{item.properties.deviceName}}
                            <span class="tab_list_count">通过量：{{item.properties.count}}</span>
                            <span class="tab_list_icon"></span>
                        </li>
                    </ol>
                </div>
            </div>

        </div>
        <div class='box'>
            <p>预测</p>
            <span class="tab_text_o">畅通</span>
            <ul>
                <li><div class="tab-o" style="background-color: #009900;"></div></li>
                <li><div class="tab-t" style="background-color: #fab005;"></div></li>
                <li><div class="tab-b" style="background-color: #ff0301;"></div></li>
            </ul>
            <span class="tab_text_t">拥堵</span>
            <div class="tab_range">
                <span class="tab_range_text">
                    时间</br>{{timeSpan}}
                </span>
                 <range width="250" height="100" padding="10" fill="#ffffff" stroke="#ffffff" :value="rangeValue" @valueChange="valueChange"></range>
            </div>
        </div>
    </div>

</template>
<script>


    import * as globals from '../global'
    import env from '../global/env'
    /*   import EnterTraffic from './EnterTra/!**!/ffic'*/
    import * as configs from '../config'
    import {mapGetters} from 'vuex'
    import myDatepicker from 'vue-datepicker-simple/datepicker-2.vue'; //引入对应的组件
    import Range from './Range'


    export default{
        name: 'ConditionMap',
        data(){
            return {
                rlatlon:'',
                showLineFlag:false,
                dates:'',
                datee:'',
                listTab:[],
                mmarks:[],
                popups:[],
                showTabFlagO:true,
                showTabFlagT:false,
                conditionMinTime:'2017-4-12 00:00',
                rangeValue:8,
                timeSpan:'',


            }

        },
        components:{
            /*EnterTraffic*/
            Range
        },
        methods: {
            valueChange(e){
                this.rangeValue=parseFloat(e);
                var value = this.rangeValue;


                var allTimeTemp = 60*24;
                var temp = allTimeTemp*(value/24);
                var date = new Date();
                var y = date.getFullYear();
                var M = _getChar(date.getMonth() + 1);
                var d = _getChar(date.getDate());
                var hour = _getChar(Math.floor(temp/60));
                var minute = _getChar(Math.floor(temp%60));
                var timeTemp = y + M + d + hour + minute;



                function _getChar(code){
                    var incode = code + "";
                    if (incode.length === 1) {
                        incode = "0" + incode;
                    }
                    return incode;
                }


                console.log(timeTemp);

                if(env.map.getSource("traffic")){
                    env.map.removeSource("traffic");
                }

                env.map.addSource("traffic", {
                    "type": "vector",
                    "tiles": [globals.URL_BAOTOU_TRAFFIC_ROOT + '/' + timeTemp]
                });

                this.timeSpan = hour+':'+minute;

                //console.log(e);
            },
            hideConditionMapO(){
                this.showTabFlagO=false;
                this.showTabFlagT=true;
            },
            showConditionMapO(){
                this.showTabFlagO=true;
                this.showTabFlagT=false;
            },
            getNowFormatDate(date,count) {
                if(count){
                    if(count == -30){
                        date.setDate(1);//获取当月第一天
                    }else{
                        date.setDate(date.getDate()+count);//获取AddDayCount天后的日期
                    }

                }
                /*if(flag == '1'){  /!*获取当月第一天*!/
                    data.setDate(1);
                }else if(flag == '2'){  /!*获取当月最后一天*!/
                    var month=date.getMonth();
                    var nextMonth=++month;
                    var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
                    var oneDay=1000*60*60*24;
                    date =  new Date(nextMonthFirstDay-oneDay);
                }*/
                /*DATE转成字符串*/
                var seperator1 = "-";
                var seperator2 = ":";
                var seperator3 = "/";
                var month = date.getMonth() + 1;
                var minutes = date.getMinutes();
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                if(minutes >= 0 && minutes <= 9){
                    minutes = "0" + minutes;
                 }
                var currentdate =date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours();
                console.log('时 间    ============'+currentdate);
                return currentdate;


            },
            changeChooseTab(flag){

                console.log('时间');
                var roadType = flag;
                if(roadType){
                    if(roadType == 'A'){
                        roadType="";
                    }
                }else{
                    roadType = 'G';
                }
                var conditionStartTime = document.getElementById('conditionStartTime').value;
                var conditionEndTime = document.getElementById('conditionEndTime').value;
                if(conditionStartTime == "" && conditionEndTime == ""){
                    document.getElementById('conditionStartTime').value = conditionStartTime = this.getNowFormatDate(new Date(),-30);
                    document.getElementById('conditionEndTime').value = conditionEndTime = this.getNowFormatDate(new Date);
                }else if(conditionStartTime == "" && conditionEndTime != ""){
                    document.getElementById('conditionStartTime').value = conditionStartTime = this.getNowFormatDate(new Date(),-30);
                }else if(conditionStartTime != "" && conditionEndTime == ""){
                    document.getElementById('conditionEndTime').value = conditionEndTime = this.getNowFormatDate(new Date);
                }
                var that = this;
                $.get(globals.URL_BAOTOU_CONDITION_OUTAGE+'?startDate='+conditionStartTime+'&endDate='+conditionEndTime+'&roadType='+roadType).done(function (data) {

                    data = jQuery.parseJSON(data);
                    var po = $('<div></div>');
                    var spo1 = $('<span>更新时间：1小时前<span>');
                    var spo2 = $('<span style="padding-left:20px">公路中断率：</span>');
                    var spo3 = $('<span style="padding-left:30px">公路拥堵度：</span>');
                    var icon_downo = $('<span class="tab_icon_down"></span>');
                    var icon_upo = $('<span class="tab_icon_up"></span>');

                    if(data.outageProbability == '低'){
                        spo2 = $('<span style="padding-left:20px">公路中断率：'+data.outageProbability+'<span class="tab_G_icon_down"></span></span>');

                    }else if(data.outageProbability == '中'){
                        spo2 = $('<span style="padding-left:20px">公路中断率：'+data.outageProbability+'<span class="tab_G_icon_up"></span></span>');
                    }else{
                        spo2 = $('<span style="padding-left:20px">公路中断率：<span style="color:red;">'+data.outageProbability+'</span></span>');
                    }

                    $.get(globals.URL_BAOTOU_CONDITION_DEGREE+'?roadType='+flag).done(function (item) {
                        item = jQuery.parseJSON(item);

                        if(item.degreeOfCongestion == '低'){
                            spo3 = $('<span style="padding-left:30px">公路拥堵度：'+item.degreeOfCongestion+'<span class="tab_O_icon_down"></span></span>');

                        }else if(item.degreeOfCongestion == '中'){
                            spo3 = $('<span style="padding-left:30px">公路拥堵度：'+item.degreeOfCongestion+'<span class="tab_O_icon_up"></span></span>');
                        }else{
                            spo3 = $('<span style="padding-left:30px">公路拥堵度：<span style="color:red;">'+item.degreeOfCongestion+'</span></span>');
                        }


                        $('#tab_mes').empty().append(spo1).append(spo2).append(spo3);

                    })

                    $.get(globals.URL_BAOTOU_CONDITION_KAKOU+'?startDate='+conditionStartTime+'&endDate='+conditionEndTime+'&roadType='+roadType).done(function (term) {

                        term = jQuery.parseJSON(term);
                        that.listTab=term.features;

                        var tempMarkers = that.mmarks;
                        for(var v=0;v<tempMarkers.length;v++){
                            tempMarkers[v].remove();
                        }

                        var feat = term.features;
                        console.log('feat======='+feat+'condition----'+conditionStartTime+'--------conditionEndTime----------'+conditionEndTime+'-------roadType======'+roadType);
                        feat.forEach(function (features) {
                            var tempMarker = null;
                            var el = document.createElement('div');
                            el.className = 'marker';

                            tempMarker = new minemap.Marker(el, {offset: [-25, -25]})
                                    .setLngLat(features.geometry.coordinates)
                                    .addTo(that.map);
                            that.mmarks.push(tempMarker);
                            el.addEventListener('click', function () {
                                var popupHtml = "<div class='panel'> <p>"+features.properties.deviceName+"</p> <p>过车量："+features.properties.count+"</p></div>";
                                var penelsFalg = false;
                                var panels = that.popups
                                that.map.flyTo({
                                    center: features.geometry.coordinates
                                });
                                if(panels.length>0){
                                    for(var i=0;i<panels.length;i++){
                                        if(panels[i].getLngLat().lng==features.geometry.coordinates[0]&&panels[i].getLngLat().lat==features.geometry.coordinates[1]){
                                            penelsFalg=true;
                                            panels[i].remove();
                                            panels.splice(i,1);
                                            var popup = new minemap.Popup({closeOnClick: false})
                                                    .setLngLat(features.geometry.coordinates)
                                                    .setHTML(popupHtml)
                                                    .addTo(that.map);
                                            that.popups.push(popup);

                                        }
                                    }
                                }
                                if(!penelsFalg){
                                    var popup = new minemap.Popup({closeOnClick: false})
                                            .setLngLat(features.geometry.coordinates)
                                            .setHTML(popupHtml)
                                            .addTo(that.map);

                                    that.popups.push(popup);
                                }
                            });
                        });

                    })




                })

            },
            initPointForMap(feat){
                var popupHtml = "<div class='panel'> <p>"+feat.properties.deviceName+"</p> <p>过车量："+feat.properties.count+"</p></div>";
                var penelsFalg = false;
                var panels = this.popups
                env.map.flyTo({
                    center: feat.geometry.coordinates
                });
                if(panels.length>0){
                    for(var i=0;i<panels.length;i++){
                        var aa = panels[i].getLngLat();
                        if(panels[i].getLngLat().lng==feat.geometry.coordinates[0]&&panels[i].getLngLat().lat==feat.geometry.coordinates[1]){
                            penelsFalg=true;
                            panels[i].remove();
                            panels.splice(i,1);
                            var popup = new minemap.Popup({closeOnClick: false})
                                    .setLngLat(feat.geometry.coordinates)
                                    .setHTML(popupHtml)
                                    .addTo(env.map);
                            this.popups.push(popup);

                        }
                    }
                }
                if(!penelsFalg){
                    var popup = new minemap.Popup({closeOnClick: false})
                            .setLngLat(feat.geometry.coordinates)
                            .setHTML(popupHtml)
                            .addTo(env.map);
                    this.popups.push(popup);
                }



            },
            addConditionTraffic(){
                env.map.addSource("traffic", {
                    "type": "vector",
                    "tiles": [globals.URL_BAOTOU_TRAFFIC_ROOT + '/' + this.getTrafficDateMark()]
                });
                console.log('路况方法load');
//        var color = ["", "#00ff00", "#ffff00", "#ff0000"];
                var color = env.trafficStatusColor;

                for (var i = 1; i < 4; i++) {
                    this.addConditionLayer(i, "traffic" + i, color[i], null);
                }
                this.setConditionStatus();
            },
            setConditionStatus(){
                for (let i = 1; i < 4; i++) {
                    if (env.map.getLayer("traffic" + i)) {
                        env.map.setLayoutProperty("traffic" + i, "visibility", "visible");
                    }
                }
            },
            getTrafficDateMark(){
                var date = new Date();
                var y = date.getFullYear();
                var M = this.get2Char(date.getMonth() + 1);
                var d = this.get2Char(date.getDate());
                var h = this.get2Char(date.getHours());
                var m = this.get2Char(date.getMinutes());

                return y + M + d + h + m;
            },
            resizeMap(){
                var that = this;
                setTimeout(() => {
                    that.map.resize();
                },50)
            },
            addConditionLayer (status, name, color, callback) {
                env.map.addLayer({
                    "id": name,
                    "type": "line",
                    "source": "traffic",
                    "source-layer": "Traffic",
                    "minzoom": 7,
                    "maxzoom": 18,
                    "layout": {
                        "line-join": "round",
                        "line-cap": "round"
                    },
                    "paint": {
                        "line-color": color,
                        "line-width": 2
                    },
                    filter: ["==", "status", status]
                }, this.layerBefore);
            },
            get2Char(code) {
                var incode = code + "";
                if (incode.length === 1) {
                    incode = "0" + incode;
                }
                return incode;
            }
        },

        mounted(){

            $('ul li').click(function () {
                console.log('进来了');
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
            })

            minemap.accessToken = globals.MAP_ACCESS_TOKEN;
            minemap.solution = globals.MAP_SOLUTION;
            minemap.spriteUrl = globals.SPRITE_LOC
            this.map = new minemap.Map({
                container: 'conditionmap',
                style: globals.URL_SERVICE_ROOT + globals.URL_STYLE_RES_ROOT + this.styleId,
                center: [109.899842, 40.635018],
                zoom: 11,
                pitch: 0,
                maxZoom: 17,
                dragRotate: false
            });



            /*
             添加traffic
             */
            env.map = this.map
            env.map.addControl(new minemap.Navigation(),"bottom-right");
            env.map.on("load", ()=> {
                this.addConditionTraffic();
            });
            /*var time = new Date()
             this.timeSpan = _getTimeChar(time.getHours())+':'+_getTimeChar(time.getMinutes());
             this.rangeValue = parseFloat(((time.getHours()*60+time.getMinutes())/(24*60))*24);*/
            this.timeSpan = '08:00'
            this.changeChooseTab();


            function _getTimeChar(code){
                var incode = code + "";
                if (incode.length === 1) {
                    incode = "0" + incode;
                }
                return incode;
            }



        },
        computed: {
            ...mapGetters({
                mapType: 'mapType',
                mapbodyfullstatus: 'mapbodyfullstatus',
            }),
            nav_hiddenorneot_img(){
                return this.mapbodyfullstatus ? 'static/img/mapfull.png' : 'static/img/mapnotfull.png'
            },
            ctrlBtnSrc(){
                return this.ctrl_btn_2d_status ? 'static/img/map/2d.png' : 'static/img/map/3d.png';
            },
            trafficBtnSrc(){
                return this.traffic_status ? 'static/img/map/traffic_on.png' : 'static/img/map/traffic_off.png'
            },
            styleId(){
                if (this.mapType === globals.MAP_TYPE_DARK) {
                    return configs.styleIdDark;

                } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
                    return configs.styleIdLight;
                }
                console.log("++++++++++++++++++++++++++"+this.mapType);
            },
            layerBefore(){
                if (this.mapType === globals.MAP_TYPE_DARK) {
                    return configs.layerBeforeDark;
                } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
                    return configs.layerBeforeLight;
                }
            },
            darkClass (){
                return {
                    'flex-item': true,
                    'flex-select': this.mapType === globals.MAP_TYPE_DARK
                }
            },
            lightClass (){
                return {
                    'flex-item': true,
                    'flex-select': this.mapType === globals.MAP_TYPE_LIGHT
                }
            }
        },
        destroyed () {
            clearInterval(this.interval);
        }

    }

</script>
<style scope>
    .conditionmap {
        z-index: 50;
        background-color: #f3f3f3;
        position: fixed;
        /* width:100%;
         height:100%;*/
        left: 0;
        right: 0;
        top: 67px;
        bottom: 0;

        /*text-align: center;*/
    }

    #cmap {
        position:fixed;
        width:100%;
        height:100%;
        z-index:59;
    }
    .traffic-enter{
        /*width:280px;*/
        position:fixed;

        z-index:51;
        /*reight:20px;*/
        left:5px;
    }
    .con_lef_body_tab{

    }
    .con_left_body{
        width:550px;
        height:800px;
        background-color: #02194d;
        /*width:280px;*/
        position:fixed;
        z-index:51;
        left:5px;
        font-family:华文宋体;
        margin-left: 15px;
        margin-top: 20px;


    }
    .con_left_body p{
        height:50px;
        width:550px;
        line-height: 37px;
        padding: 5px 10px;
        margin-bottom: 2px;
        color:#fcfcfd;
        font-size: 20px;
        padding-left: 15px;
    }
    .search_icon{
        position: absolute; height:30px;width:30px;display: block;margin-left: 487px;margin-top: -31px;
        background: url(../../static/img/analyIcon/icon-calendar-search.png) no-repeat;
    }
    .search_icon:hover{background-color: #007aff;cursor: pointer;height:35px;width:35px;-webkit-border-radius: 10px;  }
    .con_left_body input:not([type=radio]){
        background: #ffffff;
        border: #FC3 solid 1px;
        -webkit-border-radius: 3px;
        outline: none;
        padding: 5px;
        width: 107px;
        font-color:#c7cad2;
    }
    .co_date_picker_o{
        margin-left:123px;
        margin-top:-33px;
        position: absolute;
    }
    .co_date_picker_t{
        margin-left:305px;
        margin-top:-33px;
        float:left;
        position: absolute;

    }
    .tab_li{

        border-bottom: 0px;
    }
    .tab_li li{
        width:135px;
        text-align: center;
        border: 2px solid #0675b4;
        border-radius: 4px 4px 4px 4px;
    }
    .tab_li li a{
        color: #ececec;
        font-weight: 800;
        font-size:18px;
        margin-right: 0px;
    }

    .box{
        width:300px;
        height:135px;
        background-color:#021a59;
        position:fixed;

        z-index:51;
        /*reight:20px;*/
        right:45px;
        margin-top:22px;
    }
    .tab_mes{
        color: #fbfbfb;
        font-size: 18px;
        padding-left: 35px;
        padding-top: 12px;
        font-weight: 800;
    }
    .tab_content{
        margin-top:30px;
        color:#e4e7ec;
    }
    .tab_list{height:600px;overflow:auto;}
    .tab_list li{
        border: 1px solid #0675b4;
        margin-top:10px;
        line-height:35px;
        font-size:17px;
        list-style-type:none;
        margin-left: -24px;
        width: 500px;
        padding-left: 17px;
        font-weight:800;

    }
    .tab_list li:hover{background-color: #112b76;cursor: pointer;}
    .tab_list_count{ position: absolute; height:21px;width:120px;display: block;margin-left: 306px;margin-top: -34px;}
    .tab_list_icon{position: absolute; height:21px;width:30px;display: block;margin-left: 461px;margin-top: -27px;
        background: url(../../static/img/analyIcon/icon-location-green.png) no-repeat;}
    .tab_G_icon_down{position: absolute; height:21px;width:30px;display: block;margin-left: 305px;margin-top: -19px;
        background: url(../../static/img/analyIcon/icon-let-droop.png) no-repeat;}
    .tab_G_icon_up{position: absolute; height:21px;width:30px;display: block;margin-left: 305px;margin-top: -19px;
        background: url(../../static/img/analyIcon/icon-let-rise.png) no-repeat;}
    .tab_O_icon_down{position: absolute; height:21px;width:30px;display: block;margin-left: 460px;margin-top: -19px;
        background: url(../../static/img/analyIcon/icon-let-droop.png) no-repeat;}
    .tab_O_icon_up{position: absolute; height:21px;width:30px;display: block;margin-left: 460px;margin-top: -19px;
        background: url(../../static/img/analyIcon/icon-let-rise.png) no-repeat;}

    .marker {
        background-image: url('../../static/img/analyIcon/icon-electronic eye.png');
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
    }
    .minemap-popup {
        max-width: 230px;
    }
    .panel{
        background-color: #1a1b1d;
        color: #fcfffc;
        width: 240px;
        padding-top: 4px;
        margin-left: -10px;
        margin-top: -10px;
        margin-bottom: -15px;
        font-size:16px;
        height: 65px;
    }
    .hide_condition_Tab_o{
        position: absolute; height:200px;width:18px;display: block;margin-left: 550px;margin-top: 165px;z-index:50;
        background: url(../../static/img/analyIcon/icon-rightside-pack-up-dark.png) no-repeat;
    }
    .show_condition_Tab_o{
        position: absolute; height:200px;width:18px;display: block;margin-left: 1px;margin-top: 165px;z-index:50;
        background: url(../../static/img/analyIcon/icon-rightside-expand-dark.png) no-repeat;
    }

    .nav-color li{
        color:#fbfbfb;
    }
    .nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
         background-color: #10286a;
        color:#ececec;
    }
    .box{
        position: absolute;
        background-color: #091a30;
        width: 327px;
        height: 151px;


    }
    .box p{
        color: #ebebef;
        font-size: 13px;
        margin-top: 22px;
        background-color:#007aff;
        margin-left: 33px;
        position: absolute;
        width:40px;
        height: 19px;
        text-align: center;
    }
    .box ul{
        margin-left:100px;
        margin-top: 11px;
    }
    .box ul li{
        float: left;
        margin-left: 9px;
        margin-top: 13px;
        list-style: none;
    }
    .box ul li div{
        width:38px;
        height:14px;
    }
    .tab_text_o{
        margin-left: 113px;
        margin-top: 22px;
        color: #ebebef;
        position: absolute;
    }
    .tab_text_t{
        margin-left: 285px;
        margin-top: 11px;
        color: #ebebef;
        position: absolute;
    }
    .tab_range{
        margin-top: 44px;
        margin-left: 67px;
    }
    .tab_range_text{
        margin-top:37px;
        position:absolute;
        font-size:17px;
        color:#ebebef;
        margin-left:-55px;
    }
</style>